<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1926220_qb2wem6k27.css">
    <title>Classroom平台首页</title>
    <style>
        * { margin: 0px; padding: 0px; }
        button {
          cursor: pointer;
        }
        hr {
          margin: 10px 5px;
          color: rgb(231, 231, 231);
          
        }
        .nav {
          overflow: hidden;
          display: block;
          height: 70px;
          width: 100%;
          background-color: rgb(255, 255, 255);
          position: fixed;z-index: 1;
        }
        .navText {
          display: inline-block;
          }
          .navText span a{
            margin: 0 30px;
            text-decoration: none;
          }
          .navBtn {
            border-radius: 16px !important;
            padding: 4px 20px;
            margin:0 15px;
            min-width: 80px;
          }
          .queIcon {
            height: 20px;
            width: 20px;
            border-radius: 50%;
          }
          .hwImg {
            height: 100px;
            width: 100px;
            background-color: rgb(228, 92, 1);
            border-radius:100%;
            margin: 0 15px;
          }
        .header img{
          height: 400px;
          width: 100%;
          margin-top:90px;
        }
        .boxContent {
          background-color: rgb(250, 246, 244);
          position: relative;
          top: -50px;
          float: left;
          margin: 0 10%;
          border-radius: 8px;
          box-shadow: 0 0 20px 0 rgba(41,48,64,.1);
        }
        .intro-box p {
          margin: 30px 30px;
          width: 80%;
        }
        .intro-box button {
          background-color: #526ecc;
          border-radius: 20px;
          padding: 5px;
          position: absolute;
          top: 40px;
          right: 50px;
        }
        .content {
          margin: 0 auto;
        }
        .content h1{
          margin:10px 0;
          text-align: center;
        }
        .text{
          text-align: center;margin-bottom: 10px;
        }
        .threeBox {
          transition:transform 0.1s;
          border-radius: 10px;
          margin: 20px 4%;
          overflow: hidden;
          box-shadow: 0 0 20px 0 rgba(41,48,64,.1);
        }
        .threeBox :hover {
          cursor:pointer;transform:translate(0,-10px);
        }
        .one,.two,.three {
          margin:0 4%;
          float: left;
        }
        .bgImg {
          height: 150px;
          width: 100%;
          margin:0 4%;
          background-image: url(https://picsum.photos/200/300);
        }
        .textContent {
          margin: 5px 5%;
          height: 150px;
          max-width: 350px;
          position: relative;
          top: 10px;
        }
        .textContent h3 {width: 400px;text-overflow: ellipsis;}
        .freeLimit {
          background: pink;
          border-radius: 5px;
          color: red;
          padding: 5px;
          float: right;
        }
        .text_p {
          position: relative;
          top: 30px;
        }
        .checkMore {
          display: flex;
          justify-content: center;
        }
        .btnCheck {
          padding:5px 10px;border-radius: 15px;border:1px solid white;
        }
        .btnCheck:hover {border:1px solid #526ecc;}
        .rowNotice {margin: 20px 10%;}
        .rowNotice hr {margin: 20px;}
        .notImg {float: left;width: 260px;height: 126px;background-image: url(https://picsum.photos/200/300);margin-right: 80px;}
        .mes {color: #959eb2;font-size: large;margin-top: 80px;}
        .footer {background-color: rgb(243, 243, 243); height: 120px;margin-top: 80px;}
        .leftBlock {float: left;width:70%;margin-right: 10%;color:rgba(37,43,58,.7)}
        .rightBlock {color:rgba(37,43,58,.7)}
    </style>
</head>
<body>
<div class="nav">
    <!--页面导航区域-->
    <img src="https://picsum.photos/200/300" alt="logo" style="height: 40px;width:120px">
    <div class="navText">
      <span><a href="https://classroom.devcloud.huaweicloud.com/home">首页</a></span>
    <span><a href="https://classroom.devcloud.huaweicloud.com/home/course/teachingmarket">教学课堂</a></span>
    <span><a href="https://classroom.devcloud.huaweicloud.com/home/course/cloudclassroom">云课堂</a></span>
    <span><a href="https://classroom.devcloud.huaweicloud.com/home/course/microauthentication">培训认证</a></span>
    <span><a href="https://classroom.devcloud.huaweicloud.com/home/course/cloudlab">云端实验室</a></span>
    <span><a href="https://classroom.devcloud.huaweicloud.com/home/experimentalclass">新工科实验室</a></span>
    <span><a href="https://bbs.huaweicloud.com/forum/forumdisplay-fid-708-orderby-lastpost.html">学习交流</a></span>
    <button class="navBtn" type="text" value="教学平台"><a href="https://classroom.devcloud.huaweicloud.com/platform"></a>教学平台</button>
    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1587013924,4221384626&fm=26&gp=0.jpg" class="queIcon"/>
    <span class="hwImg">HW</span>
    <span>hw30824990</span>
    </div>
</div>
<div class="header">
    <!--页面头部轮播图区域-->
    <!--提示：不需要实现轮播图效果-->
    <img src="https://picsum.photos/200/300" alt="轮播图图片">
    
</div>
<div class="content">
    <!--页面内容区域-->
    <div class="intro-box">
        <!--classroom介绍区域-->
        <div class="boxContent">
      <p>Classroom是基于华为云的云上软件教学服务，支持高校师生实现备课、上课、作业、考试、实验、实训等全教学流程的线上教学，提供多类习题自动判题、企业级DevOps实训、免费在线习题库等众多高级特性辅助进行数字化教学转型。</p>
      <button>开始上课</button>
    </div>
    </div>
    <div class="class-box">
        <!--云课堂区域-->
        <h1 class="title">云课堂</h1>
        <p class="text">免费精品公开课，覆盖丰富知识点、课件与在线习题</p>
        <!-- 第一行三格子 -->
        <div class="threeBox">
          <div class="one">
            <div class="bgImg"></div>
            <div class="textContent">
              <h3>区块链精品时间课</h3>
              <p>
          <i class="icon iconfont icon-touxiang">classroom</i>
          <i class="icon iconfont icon-loufang">华为云</i>
        </p>
              <p class="text_p">本课程由深入浅的介绍区块链即使缘起。。。。</p>
            </div>
            <hr>
            <button class="freeLimit">限时免费</button>
          </div>
          <div class="two">
            <div class="bgImg"></div>
            <div class="textContent">
              <h3>基于新工科的软件工程企业级专家实践课</h3>
              <p>
                <i class="icon iconfont icon-touxiang">classroom</i>
                <i class="icon iconfont icon-loufang">华为云</i>
              </p>
              <p class="text_p">停课不停学，为了能后让同学们在家即可学习JAVA，大连理工。。。</p>
            </div>
            <hr>
            <button class="freeLimit">限时免费</button>
          </div>
          <div class="three">
            <div class="bgImg"></div>
            <div class="textContent">
              <h3>HE2E DeoOps实践</h3>
              <p>
                <i class="icon iconfont icon-touxiang">classroom</i>
                <i class="icon iconfont icon-loufang">华为云</i>
              </p>
              <p class="text_p">HE2E即华为端到端的DevOps实施框架，集合了业界先进的实践，结合华为。。。。</p>
            </div>
            <hr>
            <button class="freeLimit">限时免费</button>
          </div>
        </div>
        <!-- 第二行三格子 -->
        <div class="threeBox">
          <div class="one">
            <div class="bgImg"></div>
            <div class="textContent">
              <h3>C语言程序设计</h3>
              <p>
          <i class="icon iconfont icon-touxiang">classroom</i>
          <i class="icon iconfont icon-loufang">华为云</i>
        </p>
              <p class="text_p">本课程适合作用于高等学校计算机专业以及相关专业C语言。。。</p>
            </div>
            <hr>
            <button class="freeLimit">限时免费</button>
          </div>
          <div class="two">
            <div class="bgImg"></div>
            <div class="textContent">
              <h3>Web实践课</h3>
              <p>
                <i class="icon iconfont icon-touxiang">classroom</i>
                <i class="icon iconfont icon-loufang">华为云</i>
              </p>
              <p class="text_p">本课程涵盖：WEB基础、CSS、JS、H5等教学内容组成，学生。。。</p>
            </div>
            <hr>
            <button class="freeLimit">限时免费</button>
          </div>
          <div class="three">
            <div class="bgImg"></div>
            <div class="textContent">
              <h3>人工智能：算法与实践</h3>
              <p>
                <i class="icon iconfont icon-touxiang">classroom</i>
                <i class="icon iconfont icon-loufang">华为云</i>
              </p>
              <p class="text_p">本课程讲述的是有关人工智能算法与实践的内容，并介绍相关课程的数学基础、相关。。。</p>
            </div>
            <hr>
            <button class="freeLimit">限时免费</button>
          </div>
        </div>
        <div class="checkMore">
          <button class="btnCheck">查看更多></button>
        </div>
    </div>
    <div class="market-box">
        <!--教学市场区域-->
        <h1 class="title">教学市场</h1>
        <p class="text">丰富教学资源辅助高效教学，免费习题课一键获取</p>
        <!-- 第一行三格子 -->
        <div class="threeBox">
          <div class="one">
            <div class="bgImg"></div>
            <div class="textContent">
              <h3>JAVA习题库</h3>
              <p>
          <i class="icon iconfont icon-touxiang">classroom</i>
          <i class="icon iconfont icon-loufang">华为云</i>
        </p>
              <p class="text_p">本习题库覆盖JAVA的相关知识，习题涉及到基本数据类型、语句、封装继承、对象。。。。</p>
            </div>
            <hr>
            <button class="freeLimit">限时免费</button>
          </div>
          <div class="two">
            <div class="bgImg"></div>
            <div class="textContent">
              <h3>C-习题库</h3>
              <p>
                <i class="icon iconfont icon-touxiang">classroom</i>
                <i class="icon iconfont icon-loufang">华为云</i>
              </p>
              <p class="text_p">本习题库覆盖C语言的相关知识，习题涉及到C语言。。。</p>
            </div>
            <hr>
            <button class="freeLimit">限时免费</button>
          </div>
          <div class="three">
            <div class="bgImg"></div>
            <div class="textContent">
              <h3>WEB习题库</h3>
              <p>
                <i class="icon iconfont icon-touxiang">classroom</i>
                <i class="icon iconfont icon-loufang">华为云</i>
              </p>
              <p class="text_p">本习题库覆盖WEB开发的相关知识点，对HTML、CSS、Javascript等内容。。。。</p>
            </div>
            <hr>
            <button class="freeLimit">限时免费</button>
          </div>
        </div>
        <!-- 第二行三格子 -->
        <div class="threeBox">
          <div class="one">
            <div class="bgImg"></div>
            <div class="textContent">
              <h3>系统分析与设计</h3>
              <p>
          <i class="icon iconfont icon-touxiang">classroom</i>
          <i class="icon iconfont icon-loufang">华为云</i>
        </p>
              <p class="text_p">本课程通过DevOps与云服务器相结合，基于“项目驱动”的工程。。。</p>
            </div>
            <hr>
            <button class="freeLimit">限时免费</button>
          </div>
          <div class="two">
            <div class="bgImg"></div>
            <div class="textContent">
              <h3>数据结构（C语言）实践教学精品课</h3>
              <p>
                <i class="icon iconfont icon-touxiang">classroom</i>
                <i class="icon iconfont icon-loufang">华为云</i>
              </p>
              <p class="text_p">本课程对常用的数据结构做了系统的介绍，力求概念清晰。。。</p>
            </div>
            <hr>
            <button class="freeLimit">限时免费</button>
          </div>
          <div class="three">
            <div class="bgImg"></div>
            <div class="textContent">
              <h3>Python程序设计精品课</h3>
              <p>
                <i class="icon iconfont icon-touxiang">classroom</i>
                <i class="icon iconfont icon-loufang">华为云</i>
              </p>
              <p class="text_p">本课程主要介绍Python语言的语法及长哟个模块的使用，重点介绍面向对象。。。</p>
            </div>
            <hr>
            <button class="freeLimit">限时免费</button>
          </div>
        </div>
        <div class="checkMore">
          <button class="btnCheck">查看更多></button>
        </div>
    </div>
    <div class="activity-box">
        <!--活动公告区域-->
        <h1 style="margin: 80px 0;">活动公告</h1>
        <div class="rowNotice">
          <div class="notImg"></div><div class="ontText"><h3>大连理工大学与华为软件工程华山论剑，邀请参与</h3>
          <p class="mes">Classroom | 2020/03/31</p></div>
          <hr>
        </div>
        <div class="rowNotice">
          <div class="notImg"></div><div class="ontText"><h3>大连理工、华为云、目睹有课三方携手直播JAVA线上教学</h3>
          <p class="mes">Classroom | 2020/03/31</p></div>
          <hr>
        </div>
        <div class="rowNotice">
          <div class="notImg"></div><div class="ontText"><h3>【Part1】玩转华为云Classroom，在线教学so easy</h3>
          <p class="mes">Classroom | 2020/03/31</p></div>
          <hr>
        </div>
        <div class="rowNotice">
          <div class="notImg"></div><div class="ontText"><h3>【Part2】玩转华为云Classroom，在线教学so easy</h3>
          <p class="mes">Classroom | 2020/03/31</p></div>
          <hr>
        </div>
        <div class="rowNotice">
          <div class="notImg"></div><div class="ontText"><h3>Classroom开放免费高校自学课程，与您并肩战“疫”</h3>
          <p class="mes">Classroom | 2020/03/31</p></div>
          <hr>
        </div>
        <div class="rowNotice">
          <div class="notImg"></div><div class="ontText"><h3>Classroom线上教学免费开放，与您并肩战“疫”</h3>
          <p class="mes">Classroom | 2020/03/31</p></div>
          <hr>
        </div>
    </div>
</div>
<div class="footer">
    <!--页面尾部区域-->
    <!--提示：页面尾部内容可以简化处理-->
    <div style="margin:8% 10% 0 10%;padding-top: 45px;">
<div class="leftBlock">
      <p>版权所有巴阿巴拉巴拉巴拉了巴拉巴拉巴拉</p>
      <p>苏公网安备 320000000000000号</p>
    </div>
    <div class="rightBlock">
      <p>法律声明| 隐私政策</p> 
    </div>
    </div>
</div>
</body>
</html> 